<template>
  <div id="background" :style="{ backgroundImage: 'url(' + info.bgImage + ')' }">
    <div style="max-width: 840px; margin: 0 auto">
      <div class="app-hv-center app-column pt-8">
        <div class="app-h-center" style="color: red">
          <img :src="require('@/assets/icon.png')" alt="">
        </div>
        <h1 class="" style="color: #151516; font-weight: 300">
          {{ info.name }}
        </h1>
      </div>

      <el-row :gutter="10" class="py-3 app-h-around">
        <el-col :span="11">
          <el-select v-model="lapsCount" placeholder="请选择圈数" @change="getDataList">
            <el-option
              key="v0"
              label="全部"
              :value="undefined"
            />
            <el-option
              key="v1"
              label="1圈"
              :value="1"
            />
            <el-option
              key="v2"
              label="2圈"
              :value="2"
            />
            <el-option
              key="v3"
              label="3圈"
              :value="3"
            />
          </el-select>
        </el-col>
        <el-col :span="11" class="mr-2">
          <el-select v-model="competitionId" placeholder="请选择赛事" style="width: 100%;" @change="getDataList">
            <el-option
              v-for="c in compitetionList"
              :key="c.id"
              :label="c.name"
              :value="c.id"
            />
          </el-select>
        </el-col>
      </el-row>
      <el-table
        :data="dataList"
        style="width: 100%"
        :header-row-style="{ textAlign: 'center' }"
        @sort-change="sortChange"
      >
        <el-table-column sortable="custom" align="center" prop="no" label="编号" />
        <el-table-column prop="name" align="center" label="选手">
          <template slot-scope="scope">
            <div class="app-v-center app-column">
              <img
                :src="scope.row.imageUrl || require('@/assets/icon.jpg')"
                style="width: 40px; height: 40px; border-radius: 50%"
                alt=""
              >
              <div class="mt-2">
                {{ scope.row.name }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="lapsCount" label="圈数" />
        <el-table-column v-if="!lapsCount || lapsCount >= 1" align="center" prop="speed" label="第一圈">
          <template slot-scope="scope">
            <span v-if="scope.row.speed">
              {{ scope.row.speed === -1 ? 'DNF' : scope.row.speed.toFixed(2)+ '秒' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column v-if="!lapsCount || lapsCount >= 2" align="center" prop="speedTwo" label="第二圈">
          <template slot-scope="scope">
            <span v-if="scope.row.speedTwo">
              {{ scope.row.speedTwo === -1 ? 'DNF' : scope.row.speedTwo.toFixed(2)+ '秒' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column v-if="!lapsCount || lapsCount === 3" align="center" prop="speedThree" label="第三圈">
          <template slot-scope="scope">
            <span v-if="scope.row.speedThree">
              {{ scope.row.speedThree === -1 ? 'DNF' : scope.row.speedThree.toFixed(2)+ '秒' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" align="center" prop="speedTotal" label="总时间">
          <template slot-scope="scope">
            <span v-if="scope.row.speedTotal">
              {{ scope.row.speedTotal === -1 ? 'DNF' : scope.row.speedTotal.toFixed(2)+ '秒' }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="isMobile" class="app-hv-center app-column jump-btn" @click="goToAppointment()">去预约</div>
  </div>
</template>

<script>
import { getConfig,getRankingList,getCompetitionList } from '@/api/user'
import { _isMobile } from '@/utils/index'
import { host } from '@/utils/request'
import { appId } from '@/utils'
export default {
  data: () => ({
    isMobile: _isMobile(),
    info: {
      avatar: '',
      bgImage: '',
      directSeeding: '',
      id: 0,
      introduction: '',
      name: '',
      space: ''
    },
    name: '',
    desc: undefined,
    dataList: [],
    compitetionList: [],
    competitionId: null,
    lapsCount: null
  }),
  mounted() {
    this.getInfoConfig()
    this.getDataList()
    setInterval(() => {
      this.getDataList()
    }, 60000)
    getCompetitionList({ pageNo: 1,pageSize: 999 }).then((res) => {
      if (res.code === 200) {
        this.compitetionList = res.data.dataList
      }
    })
  },
  methods: {
    goToAppointment() {
      location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(host + '/user/oauth')}&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect`
    },
    getInfoConfig() {
      getConfig().then((res) => {
        if (res.code === 200) {
          this.info = Object.assign(this.info, res.data || {})
        }
      })
    },
    sortChange(column) {
      if (!column.order) {
        this.desc = undefined
      } else if (column.order === 'ascending') {
        if (column.prop === 'no') {
          this.desc = 1
        } else {
          this.desc = 3
        }
      } else {
        if (column.prop === 'no') {
          this.desc = 2
        } else {
          this.desc = 4
        }
      }
      this.getDataList()
    },
    getDataList() {
      const params = {
        pageNo: 1,
        pageSize: 5000,
        name: this.name,
        competitionId: this.competitionId,
        lapsCount: this.lapsCount,
        desc: this.desc
      }
      getRankingList(params).then((res) => {
        if (res.code === 200) {
          this.dataList = res.data.dataList
          this.total = res.data.total
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  table {
    background-color: transparent;
  }
  background-color: #fff9;
}
#background {
  background-color: #BADDFB;
  background-size: 100% 100% ;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
.jump-btn {
  width: 80px;
  height: 80px;
  background-color: #4887BD88;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 0 6px #eee;
  position: fixed;
  bottom: 80px;
  right: 20px;
}
</style>
